<template>
  <div class="editBox">
    <div class="edit-header">
      <el-input
        v-model="article.title"
        placeholder="请输入文章标题"
        type="primary">
      </el-input>
      <el-select
        v-model="tags"
        multiple
        :multiple-limit="3"
        filterable
        allow-create
        default-first-option
        placeholder="请选择文章标签">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>   
    </div>
    
    <div id="add-body">
      <!-- 这里必须用id，否则权重不够 -->
      <mavon-editor
          v-model="article.content"
          style="height: 100%;"
          :toolbars="toolbars"
          ref=md
          @save="saveArticles"
          @imgAdd="$imgAdd" 
          @imgDel="$imgDel"
          fontSize="16px">
      </mavon-editor>
     </div>
  </div>
</template>

<script>
import uri from '@/config/uri';
export default {
    // name: 'editor',
    data () {
      return {
        article: {},
        options: [],
        tags: [],
        img_file:[[0,null]],
        toolbars: {
          bold: true, // 粗体
          italic: true, // 斜体
          header: true, // 标题
          underline: true, // 下划线
          strikethrough: true, // 中划线
          mark: true, // 标记
          superscript: true, // 上角标
          subscript: true, // 下角标
          quote: true, // 引用
          ol: true, // 有序列表
          ul: true, // 无序列表
          link: true, // 链接
          imagelink: true, // 图片链接
          code: false, // code
          table: true, // 表格
          fullscreen: true, // 全屏编辑
          readmodel: true, // 沉浸式阅读
          htmlcode: true, // 展示html源码
          help: true, // 帮助
          /* 1.3.5 */
          undo: true, // 上一步
          redo: true, // 下一步
          trash: true, // 清空
          save: true, // 保存（触发events中的save事件）
          /* 1.4.2 */
          navigation: true, // 导航目录
          /* 2.1.8 */
          alignleft: true, // 左对齐
          aligncenter: true, // 居中
          alignright: true, // 右对齐
          /* 2.2.1 */
          subfield: true, // 单双栏模式
          preview: true, // 预览
      },
    }
  },
  methods: {
      parseTime(){
        var now = new Date()
        let str = ''
        str += now.getFullYear()
        str +='-'
        str +=  now.getMonth()+1
        str +='-'
        str += now.getDate()
        return str
      },
      saveArticles (value, render) {
        // value 是 md，render 是 html
        this.$confirm('是否保存并发布文章?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // console.log(this.parseTime())
            this.$http
            .post(uri.add,{
                title: this.article.title,
                content: this.$refs.md.d_value,
                date: this.parseTime(),
                tag: this.tags
              }).then(resp => {
              if (resp) {
                this.$message({
                  type: 'success',
                  message: '已保存成功'
                })
                 
              }
            })
            // console.log(this.$refs.md.d_render);
            // console.log(this.$refs.md.d_value);
          }
        ).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消发布'
          })
        })
      },
      $imgAdd(pos, $file) {
        // 第一步.将图片上传到服务器.
        var formdata = new FormData();
        formdata.append('image', $file);
        // 这里formdata.append的'image',就是后端接收的field字段，一定要和后端保持一致，否则会出错
        // console.log($file)
        this.img_file[pos] = $file;
        this.$http({
            url: uri.uploadImg,
            method: 'post',
            data: formdata,
            headers: {'Content-Type':'multipart/form-data'},
        }).then((res) => {
            let host = 'http://localhost:3003/static'
            let imgURL = host + res.imgurl
            // console.log(res)
            // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
            this.$refs.md.$img2Url(pos, imgURL);
        })
      },
      $imgDel(pos) {
         // 这里只是删除视图里面的，并没有操作数据库和后端
          delete this.img_file[pos];
      }
  },
   created(){
     //打开新建页面，自动把所有tag渲染到标签选则栏的选项中
    this.$http.get(uri.getTag)
    .then((data)=>{
      // this.tags = data.taglist
      let list = data.taglist
      for(let i=0;i<list.length;i++){
         this.options.push({"value":list[i],"label":list[i]})
      }
     
    })
    .catch((err)=>{
      console.log('出错')
    })
  },
}
</script>

<style scoped lang="scss">

.editBox{
    position: absolute;
    width: 100%;
    left: 0;
    z-index: 1600;
    overflow-y: auto;
    overflow-x: hidden;
    bottom: 0;
    height: 100%;
    background-color: rgb(236 241 190 / 44%);
    .edit-header{
        display: flex;
      }
    #add-body{
      position: relative;
      width: 100%;
      height: 100%;
    }
}
.el-input{
  flex: 2;
}
.el-select{
  flex: 1;
} 
</style>